<template>
    <div class="car-driver-select">
        <div class="select-item">
            <el-form-item label="所属公司" prop="companyId">
                <el-tree-select v-model="query.companyId" placeholder="请选择所属公司" clearable :data="treeList"
                    :expand-on-click-node="false" :render-after-expand="false" check-strictly :props="{ label: 'label' }"
                    node-key="id" filterable @change="getCarData" />
            </el-form-item>
            <el-form-item label="光伏板编号" prop="numberPlate">
                <div class="select-input">
                    <el-input v-model="query.numberPlate" placeholder="请输入光伏板编号" clearable @keyup.enter="handleCarQuery"
                        width="160px" />
                    <el-icon @click="getCarData" title="搜索">
                        <Search />
                    </el-icon>
                </div>
            </el-form-item>
            <el-table v-loading="loading" :data="carList" highlight-current-row @current-change="handleCurrentChangeCar"
                :height="450" style="border:0 !important">
                <el-table-column label="序号" align="center" type="index" width="55"></el-table-column>
                <el-table-column label="光伏板编号" align="center" prop="numberPlate" :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
            <div>
                <el-pagination :total="carPagination.total" size="small" class="small-pagination" layout="prev, pager, next"
                    @current-change="carCurrentChange" :page-size="carPagination.pageSize" :pager-count="5" />
            </div>
        </div>
        <div class="select-item">
            <el-form-item label="所属公司" prop="companyId2">
                <el-tree-select v-model="query.companyId2" placeholder="请选择所属公司" clearable :data="treeList"
                    :expand-on-click-node="false" :render-after-expand="false" check-strictly :props="{ label: 'label' }"
                    node-key="id" filterable @change="getDriverData" />
            </el-form-item>
            <el-form-item label="负责人名称" prop="name">
                <div class="select-input">
                    <el-input v-model="query.name" placeholder="请输入负责人名称" clearable @keyup.enter="handleDriverQuery"
                        width="160px" />
                    <el-icon @click="getDriverData" title="搜索">
                        <Search />
                    </el-icon>
                </div>
            </el-form-item>
            <el-table v-loading="driverLoading" :data="driverList" highlight-current-row
                @current-change="handleCurrentChangeDriver" :height="450" style="border:0 !important">
                <el-table-column label="序号" align="center" type="index" width="55"></el-table-column>
                <el-table-column label="负责人名称" align="center" prop="name" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
            <el-pagination :total="driverPagination.total" size="small" class="small-pagination" layout="prev, pager, next"
                @current-change="driverCurrentChange" :page-size="driverPagination.pageSize" :pager-count="5" />
        </div>
        <el-button icon="DArrowRight" class="add-btn" @click="addData2Selects">添加</el-button>
        <div class="select-car-driver-list">
            <div class="count">
                <span :style="{ color: selects?.length == props.vehicleNum ? 'green' : 'red' }">{{ selects?.length }}</span>
                /
                <span style="color:green">{{ props.vehicleNum }}</span>
            </div>
            <ul>
                <li v-if="selects?.length == 0" style="text-align: center;">
                    暂无数据
                </li>
                <li v-for="(item, index) in selects" :key="item.vehicleId + '-' + item.driverId"
                    class="select-car-driver-item">
                    <div class="context">
                        <div><span>光伏板编号：</span>{{ item.numberPlate }}</div>
                        <div><span>负责人：</span>{{ item.driverName }}</div>
                    </div>
                    <el-button class="remove-btn" size="small" icon="delete" type="danger" plain
                        @click="removeSelect(index)"></el-button>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Ref } from "vue"
import { getVehicleList, getDriverList } from "@/api/tool/gen"
import { getSearchCompanyListRole } from "@/api/system/dept";
const carList = ref([])
const driverList = ref([])
const loading = ref(false);
const driverLoading = ref(false);
const { proxy } = getCurrentInstance() as any;
const treeList = ref([])
getSearchCompanyListRole().then(res => {
    treeList.value = res.data
})
const props = defineProps({
    vehicleNum: {
        type: Number,
        require: true,
    }
})
const carPagination = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
})
const driverPagination = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
})
const query = reactive({
    numberPlate: "",
    name: "",
    companyId: "",
    companyId2: "",
})
const selectData = ref<{
    numberPlate: string,
    vehicleId: string,
    driverId: string,
    driverName: string,
    companyId: string,
}>({
    numberPlate: null,
    vehicleId: null,
    driverId: null,
    driverName: null,
    companyId: null,
})
interface CarDriverBind {
    numberPlate: string,
    vehicleId: string,
    driverId: string,
    driverName: string,
}
const selects = defineModel() as Ref<CarDriverBind[]>;
function getCarData() {
    loading.value = true;
    getVehicleList({
        pageNum: carPagination.pageNum,
        pageSize: carPagination.pageSize,
        numberPlate: query.numberPlate,
        companyId: query.companyId,
        vehicleTaskStatus: 0
    }).then((res: any) => {
        loading.value = false;
        carList.value = res.rows;
        carPagination.total = res.total;
    })
}
function getDriverData() {
    driverLoading.value = true;
    getDriverList({
        pageNum: driverPagination.pageNum,
        pageSize: driverPagination.pageSize,
        name: query.name,
        companyId: query.companyId2,
        vehicleTaskStatus: 0
    }).then((res: any) => {
        driverLoading.value = false;
        driverList.value = res.rows;
        driverPagination.total = res.total;
    })
}
function carCurrentChange(pageNum) {
    carPagination.pageNum = pageNum;
    getCarData();
}
function handleCarQuery() {
    carCurrentChange(1);
}

function driverCurrentChange(pageNum) {
    driverPagination.pageNum = pageNum;
    getDriverData();
}
function handleDriverQuery() {
    driverCurrentChange(1);
}
// 光伏板选中
function handleCurrentChangeCar(data) {
    selectData.value.companyId = data.companyId
    selectData.value.numberPlate = data.numberPlate
    selectData.value.vehicleId = data.id
}
// 负责人选中
function handleCurrentChangeDriver(data) {
    selectData.value.driverName = data.name
    selectData.value.driverId = data.id
}
function init() {
    getCarData();
    getDriverData();
}
function addData2Selects() {
    if (!selectData.value.vehicleId) {
        proxy.$modal.msgWarning("请选择光伏板！");
        return
    }
    if (!selectData.value.driverId) {
        proxy.$modal.msgWarning("请选择负责人！");
        return
    }
    function judgeData(data) {
        return selects.value.find(v => (v.vehicleId == data.vehicleId))
    }
    if (judgeData(selectData.value)) {
        proxy.$modal.msgWarning("请选择其他光伏板");
        return
    }
    selects.value.push(JSON.parse(JSON.stringify(selectData.value)));
}
function removeSelect(index: number) {
    selects.value.splice(index, 1)
}
init();
</script>
<style lang='scss' scoped>
.car-driver-select {
    display: flex;
    gap: 16px;
    align-items: center;
}

.select-item {
    border-right: 1px solid #eee;
    padding-right: 24px;
    align-items: center;
    height: 100%;
    width: 300px;

    .select-input {
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
            cursor: pointer;
            font-size: 20px;
        }
    }
}

.select-car-driver-list {
    height: 582px;
    display: flex;
    flex-direction: column;
    flex: 1;

    .count {
        margin-left: auto;
        margin-right: 16px;
        margin-bottom: 8px;
    }

    ul {
        flex: 1;
        border: 1px solid #eee;
        height: 100%;
        border-radius: 8px;
        padding: 8px;
        box-sizing: border-box;
        display: flex;
        gap: 8px;
        flex-direction: column;

        .select-car-driver-item {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 4px 16px;
            background-color: #f1f1f180;
            display: flex;
            gap: 4px;

            .context {
                flex: 1;
                display: flex;
                gap: 4px;
                flex-direction: column;

                span {
                    font-weight: 600;
                }
            }
        }
    }


}

.small-pagination {
    margin-left: auto;
    width: fit-content;
}
</style>